<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>实现CSS布局</title>
	<link rel="stylesheet" href="">
	<style>
		.wrap {
            position: fixed;
            left: 10px;
            right: 10px;
            top: 0;
            bottom: 0;
        }

        .box {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 50%;
            background: red;
        }

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 20px;
            background: blue;
        }
	</style>
</head>
<body>
	<!--  
		一个div垂直居中
		其距离屏幕左右两边各10px
		其高度始终是宽度的50%

		div中有文本'A'
		其font—size:20px
		文本水平垂直居中
	-->
<div class="wrap">
    <div class="box">
        <span class="text">A</span>
    <div>
</div>
</body>
</html>